<template>
  <div class="bgimg">
    <img
      src="https://ts1.cn.mm.bing.net/th/id/R-C.5c73e2ed244e8ac46d60fc3050a45dfb?rik=LecBMvZkt9qBKg&riu=http%3a%2f%2fimage2.pearvideo.com%2fcont%2f20200816%2fcont-1692131-12451889.png&ehk=X98lY8Wc9O0GcLnK2okyFRNea3v2BdMF7DBGqqCvMrI%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1"
      alt=""
    >
  </div>
  <div class="shop">
    <div
      class="card"
      v-for="item in shopData"
      :key="item.id"
    >
      <div class="img">
        <img
          :src="item.images"
          alt=""
        >
      </div>
      <div class="title">{{item.title}}</div>
      <div class="pice">{{ item.pic }}</div>
      <div
        class="btn"
        @click="payment(item.id)"
      >购买</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter() // 提现记录
import { ref, onMounted } from 'vue'
import axios from 'axios'
const shopData = ref([])
onMounted(() => {
  let api = 'https://apifoxmock.com/m1/4457699-4103776-default/api/catShop'
  axios.get(api).then((res) => {
    shopData.value = res.data
  })
})
function payment(e) {
  sessionStorage.setItem('commodityId', e)
  router.push({ path: '/payment', query: { commodityId: e } })
}
</script>
<style scoped>
.shop {
  width: 100%;
  padding: 10px 15%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.shop .card {
  margin: 10px auto;
  width: 24%;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 15px #ccc;
}
.shop .card .img {
  width: 100%;
}

.shop .card img {
  width: 100%;
}
.shop .card .title {
  font-size: 1.2rem;
  font-weight: 600;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.shop .pice {
  margin-top: 10px;
  color: var(--myc);
  font-weight: 600;
}
.shop .btn {
  float: right;
  padding: 5px 10px;
  color: #fff;
  background-color: var(--myc);
}
.shop .btn:hover {
  cursor: pointer;
  background-color: var(--mych);
}
@media (max-width: 1100px) {
  .shop {
    padding: 15px;
  }
}
@media (max-width: 760px) {
  .shop .card {
    width: 30%;
  }
}
@media (max-width: 400px) {
  .shop .card {
    width: 45%;
  }
}
</style>